<template>
  <div class="flex flex-wrap gap-2 items-center">
    <Input v-model="input" placeholder="添加标签，回车确认" class="w-32" @keydown.enter.prevent="addTag" />
    <div class="flex flex-wrap gap-1">
      <Badge v-for="tag in tags" :key="tag" variant="outline" class="flex items-center gap-1">
        {{ tag }}
        <Button size="icon" variant="ghost" class="p-0 ml-1" @click="removeTag(tag)">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" stroke="currentColor" class="w-3 h-3"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l8 8M6 14L14 6"/></svg>
        </Button>
      </Badge>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Input } from './ui/input';
import { Badge } from './ui/badge';
import { Button } from './ui/button';

const props = defineProps<{ tags: string[] }>();
const emit = defineEmits<{ (e: 'update:tags', tags: string[]): void }>();
const input = ref('');

function addTag() {
  const tag = input.value.trim();
  if (tag && !props.tags.includes(tag)) {
    emit('update:tags', [...props.tags, tag]);
    input.value = '';
  }
}

function removeTag(tag: string) {
  emit('update:tags', props.tags.filter(t => t !== tag));
}
</script> 